<!-- 本页样式 -->
<style lang="scss" scoped>
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
</style>
<style lang="scss">
.filedownload{
  
  .el-popover{
    .operate_list{
      line-height: 30px;
      font-size: 16px;
      text-align: center;
      width: 100%;
      li{
        list-style-type:none;
      }
      li:hover{
        color: #00978A;
      }
      i{
        font-size: 14px;
      }
    }
  }

}
</style>
<!-- 页面布局-->
<template>
  <div class="table filedownload">
    <!-- 标题导航栏 -->
    <div class="title-box crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-tickets"></i>制卡管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>制卡文件下载</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 主体区 -->
    <div class="container">
      <!-- 查询条件 -->
      <div class="search-box">
        <div class="search-item-box">
          <table>
            <tr>
              <td>
                <i class="el-icon-search"></i>
              </td>
              <td class="search_td">
                <el-select v-model="parampters.dataFormatNo" clearable placeholder="卡数据格式" style="width: 120px !important;">
                  <el-option v-for="item in dicts.dataformatNo" :key="item.code" :label="item.name" :value="item.code">
                  </el-option>
                </el-select>
              </td>
              <td class="search_td">
                <el-date-picker v-model="parampters.year" type="year" value-format="yyyy" placeholder="申请年份" style="width:150px;"></el-date-picker>
              </td>
              <td class="search_td">
                <el-input v-model="parampters.applyBatchNo" clearable placeholder="申请批次" class="handle-input mr10"></el-input>
              </td>
              <td class="search_td">
                <el-select v-model="parampters.status" clearable placeholder="状态">
                  <el-option v-for="item in dicts.cardapply" :key="item.code" :label="item.name" :value="item.code">
                  </el-option>
                </el-select>
              </td>
              <td class="search_td">
                <el-date-picker v-model="parampters.starttime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="起始时间" class="handle-input mr10" style="width:200px;">
                </el-date-picker>
              </td>
              <td class="search_td">
                <el-date-picker v-model="parampters.endtime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="截止时间" class="handle-input mr10" style="width:200px;">
                </el-date-picker>
              </td>
            </tr>
          </table>
        </div>
        <div class="search-button-box">
          <el-button type="primary" size="small" icon="search" @click="searchLoad">查询</el-button>
        </div>
      </div>
      <!-- 查询条件END -->
      <!-- 数据列表 -->
      <div class="grid-data-box">
        <el-table v-loading="tableLoading" :max-height="tableListHeight" :data="tableData" border :cell-class-name="changeColumnClass" :header-cell-style="{background:'#F3F3F3',color:'#606266'}" show-overflow-tooltip style="width: 100%" ref="multipleTable" @row-dblclick="clickToView" @current-change="handleTableCurrentChange">
          <el-table-column type="index" label="序号" width="50" show-overflow-tooltip></el-table-column>
          <el-table-column prop="dataformatNo" label="卡数据格式" width="100" :formatter="formatter" show-overflow-tooltip></el-table-column>
          <el-table-column prop="year" label="年份" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="applyBatchNo" label="申请批次" show-overflow-tooltip></el-table-column>
          <el-table-column prop="cardNum" label="申请数量" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="status" label="状态" width="150" :formatter="formatter" show-overflow-tooltip></el-table-column>
          <el-table-column prop="timestamp" label="申请时间" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" fixed="right" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-popover placement="bottom" width="200" trigger="hover">
                <div class="fxcol fxcc">
                  <el-button type="primary" size="mini" icon="el-icon-download" @click="downloadApplyFile(scope.row)" style="margin-left: 10px;">申请文件下载</el-button>
                  <el-button type="primary" size="mini" icon="el-icon-download" @click="downloadCheckFile(scope.row)" style="margin-top: 10px;">校验文件下载</el-button>
                  <el-button type="primary" size="mini" icon="el-icon-download" @click="downloadResFile(scope.row)" style="margin-top: 10px;">制卡文件下载</el-button>
                  <el-button type="primary" size="mini" icon="el-icon-download" @click="downloadPomFile(scope.row)" style="margin-top: 10px;">pom文件下载</el-button>
                  <el-button type="primary" size="mini" icon="el-icon-download" @click="transformFile(scope.row)" style="margin-top: 10px;">制卡数据转换</el-button>
                </div>
                <!-- <ul class="operate_list">
                  <li @click="downloadApplyFile(scope.row)"><i class="el-icon-download"></i>&nbsp;申请文件下载</li>
                  <li @click="downloadCheckFile(scope.row)"><i class="el-icon-download"></i>&nbsp;校验文件下载</li>
                  <li @click="downloadResFile(scope.row)"><i class="el-icon-download"></i>&nbsp;制卡文件下载</li>
                  <li @click="downloadPomFile(scope.row)"><i class="el-icon-download"></i>&nbsp;pom文件下载</li>
                </ul> -->
                <span slot="reference" style="cursor:pointer">更多</span>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 数据列表END -->
      <!-- 翻页导航条 -->
      <div class="navigate-box">
        <div class="pagination">
          <el-pagination background @current-change="handleCurrentChange" :total="parampters.totalCount" @size-change="handleSizeChange" :current-page.sync="parampters.pageIndex" :page-sizes="[20, 50, 100, 200]" :page-size="parampters.pageRows" layout="total, sizes, prev, pager, next"></el-pagination>
        </div>
      </div>
      <!-- 翻页导航条END -->
    </div>
    <!-- 主体区END -->
  </div>
</template>


<script>
import applybatchupd from "./applybatch_upd.vue";
import fileapply from "./applybatch_fileapply.vue";
import batchapply from "./applybatch_batchapply.vue";
import apply from "./applybatch_apply.vue";
export default {
  data() {
    return {
      // 筛选条件
      parampters: {
        //查询参数
        loginsid: "", //登录会话SID
        pageRows: 20, //每页行数
        pageIndex: 0, //当前页
        pageCount: 0, //总页数
        totalCount: 0, //总记录数
        dataFormatNo: "", //卡数据格式
        year: "", //申请年份
        applyBatchNo: "", //申请批次
        status: "", //状态
        starttime: "", //起始时间
        endtime: "", //截止时间
      },
      // 查询出的表格数据
      tableLoading: true,
      tableData: [],
      //confirm提示信息弹框
      confirmBox: null,
      //所选记录id
      selectedId: "",
      //事物类型
      actType: "list",
      //字典集
      dicts: {},
    };
  },
  // 进入页面加载数据
  activated() {
    this.handleInitLoad();
  },
  methods: {
    /**
     * 组件初始化加载
     */
    handleInitLoad() {
      this.initSelectOptoins();
      this.searchLoad();
    },

     /**
     * 初始加载字典选项
     */
    initSelectOptoins() {
      this.loadSelectOptoins("cardapply", null);
      this.loadSelectOptoins("dataformatNo", null);
    },

    /**
     * 通用定义:下拉字典
     *  @augments dictKind 字典类型
     */
    loadSelectOptoins(dictKind, params) {
      let url = "/rps/dictionary/";
      this.$axios
      .get(url, {
        params: {
          type: dictKind
        },
        headers:{
          operator: this.$util.getLoginer().userid,
          withCredentials: true
        }
      })
      .then(res => {
        let data = res.data;
        if (data.success) {
          this.$set(this.dicts, dictKind, data.data.list);
        } else {
          console.log(data.message);
          // this.$error( "查询失败" + data.message );
        }
      })
      .catch(err => {
        console.log(err);
      });
    },

    handleTableCurrentChange(val) {
    },

    changeColumnClass(data) {
      if (data.columnIndex == 1 || data.columnIndex == 2) {
        return "tabcolumn_left";
      }
    },

    /**
     * @augments  row 行所在的数据
     * 表格数据列 内容字典转换
     */
    formatter(row, column) {
      if (column.property == "dataformatNo") {
        return this.$dicts.transDict( this.dicts.dataformatNo, "code", "name", row.dataformatNo);
      } else if (column.property == "status") {
        return this.$dicts.transDict( this.dicts.cardapply, "code", "name", row.status);
      }else if(column.property == "timestamp"){
        if(row.timestamp == undefined || row.timestamp == null || row.timestamp == ""){
          return "";
        }else{
          let now = new Date(Number(row.timestamp));
          let y = now.getFullYear();
          let m = now.getMonth() + 1;
          let d = now.getDate();
          return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
        }
      }
    },

    /**
     * @augments val 页码
     * 切换页码操作
     */
    handleCurrentChange(val) {
      this.parampters.pageIndex = val;
      // 重新获取当前页码的数据
      this.searchLoad();
    },

    /**
     * @augments val 每页显示条数
     * 每页显示条数修改
     */
    handleSizeChange(val) {
      // 修改每页显示条数
      this.parampters.pageRows = val;
      // 重新获取数据
      this.searchLoad();
    },

    /**
     * 条件筛选查询,加载数据
     */
    searchLoad() {
      this.parampters = this.$util.trimObjStr(this.parampters);
      this.parampters.loginsid = this.$util.getLoginer().sessionId;
      this.tableLoading = true;
      this.$axios
        .get(
          "/rps/cardApplyBatch/?"+new Date().getTime(),
          {
            params: this.parampters,
            headers: {
              operator: this.$util.getLoginer().userid,
              withCredentials: true
            }
          }
        )
        .then(res => {
          let data = res.data;
          if (data.success) {
            this.tableData = data.data.list;
            this.tableLoading = false;
            this.parampters.pageIndex =
              data.data.pageNum != undefined ? parseInt(data.data.pageNum) : 0;
            this.parampters.pageCount =
              data.data.totalPage != undefined ? parseInt(data.data.totalPage) : 0;
            this.parampters.totalCount =
              data.data.count != undefined ? parseInt(data.data.count) : 0;
          } else {
            this.tableLoading = false;
            this.$error(data.message);
          }
        })
        .catch(err => {
          this.tableLoading = false;
          console.log(err);
        });
    },

    /**
     * 文件申请
     */
    toFileApply() {
      //页面参数
      var pageParam = {
        loginInfo: this.$util.getLoginer(),
        actType: "add",
        seleid: "-1"
      };
      let commDialog = this.$dialog.commDialog(
        "文件导入",
        fileapply,
        pageParam,
        "900px",
        "440px"
      );
      commDialog.exec.then(data => {
        this.searchLoad();
      });
    },

    /**
     * 成卡申请
     */
    toBatchApply() {
      //页面参数
      var pageParam = {
        loginInfo: this.$util.getLoginer(),
        actType: "add",
        seleid: "-1"
      };
      let commDialog = this.$dialog.commDialog(
        "按号段录入申请",
        batchapply,
        pageParam,
        "700px",
        "440px"
      );
      commDialog.exec.then(data => {
        this.searchLoad();
      });
    },

    /**
     * 白卡申请
     */
    toApply() {
      //页面参数
      var pageParam = {
        loginInfo: this.$util.getLoginer(),
        actType: "add",
        seleid: "-1"
      };
      let commDialog = this.$dialog.commDialog(
        "联通白卡申请",
        apply,
        pageParam,
        "700px",
        "440px"
      );
      commDialog.exec.then(data => {
        this.searchLoad();
      });
    },

    /**
     * 重新申请
     */
    toReApply() {},

    /**
     * 修改记录信息
     * @augments index 编辑数据所在的行索引
     * @augments row 编辑数据行的数据
     */
    toUpd(row) {
      this.selectedId = row.cardFaceId;
      //页面参数
      var pageParam = {
        actType: "upd",
        seleid: this.selectedId
      };
      let commDialog = this.$dialog.commDialog(
        "编辑制卡文件下载信息",
        applybatchupd,
        pageParam,
        "700px",
        "440px"
      );
      commDialog.exec.then(resp => {
        if (resp.type == "ok") {
          this.searchLoad();
        } else if (resp.type == "cancel") {
        }
      });
    },

    /**
     * 导出 excel
     */
    toExportExcel() {},

    //
    clickToView(rowData, column, event) {
      return;
      // this.toView(rowData);
    },

    /**
     * 查看记录信息
     * @augments row 编辑数据行的数据
     * @augments ev
     */
    toView(row) {
      this.selectedId = row.cardFaceId;
      //页面参数
      var pageParam = {
        actType: "view",
        seleid: this.selectedId
      };
      let commDialog = this.$dialog.commDialog(
        "查看制卡文件下载信息",
        applybatchupd,
        pageParam,
        "700px",
        "440px"
      );
      commDialog.exec.then(data => {});
    },

    /**
     * 删除记录信息
     * @augments index 所在表格行的索引
     * @augments row 所在表格行的所有数据对象
     */
    toDel(row) {
      this.selectedId = row.cardFaceId;
      this.confirmBox = this.$dialog.confirm("确定删除所选记录吗？");
      this.confirmBox.exec.then(btnName => {
        if (btnName == "ok") {
          // 确定删除数据操作
          this.$axios
            .post(
              "/rps/cardFace/" + this.selectedId,
              {},
              {
                headers: {
                  operator: this.$util.getLoginer().userid,
                  withCredentials: true
                }
              }
            )
            .then(res => {
              let data = res.data;
              if (data.success) {
                this.$dialog.close(this.confirmBox.vm);
                this.$message.success("删除成功");
                this.searchLoad();
              } else {
                this.$dialog.close(this.confirmBox.vm);
                this.$error(data.message);
              }
            })
            .catch(err => {
              this.$dialog.close(this.confirmBox.vm); // 取消删除数据操作
            });
        } else {
          this.$dialog.close(this.confirmBox.vm); // 取消删除数据操作
        }
      });
    },
    /**
     * 申请文件下载
     */
    downloadApplyFile() {
      this.$axios
        .post("/rps/downloadFiles/cardapplyrst/", {}, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true
          }
        })
        .then(res => {
          let data = res.data;
          // 关闭提交表单的loading
          this.fullscreenLoading = false;
          if (data.success) {
           
          } else {
            this.$error(data.message);
          }
        })
        .catch(err => {
          this.fullscreenLoading = false;
        });
    },
    /**
     * 校验文件下载
     */
    downloadCheckFile() {
      this.$axios
        .post("/rps/downloadFiles/cardapplycheck/", {}, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true
          }
        })
        .then(res => {
          let data = res.data;
          // 关闭提交表单的loading
          this.fullscreenLoading = false;
          if (data.success) {
           
          } else {
            this.$error(data.message);
          }
        })
        .catch(err => {
          this.fullscreenLoading = false;
        });
    },
    /**
     * 制卡文件下载
     */
    downloadResFile() {
      this.$axios
        .post("/rps/downloadFiles/cardapplyresp/", {}, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true
          }
        })
        .then(res => {
          let data = res.data;
          // 关闭提交表单的loading
          this.fullscreenLoading = false;
          if (data.success) {
           
          } else {
            this.$error(data.message);
          }
        })
        .catch(err => {
          this.fullscreenLoading = false;
        });
    },
    /**
     * pom文件下载
     */
    downloadPomFile() {
      
    }
  }
};
</script>
